<!--
 * @Author: your name
 * @Date: 2022-02-10 08:48:44
 * @LastEditTime: 2022-02-10 16:05:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-examine\src\views\players\index.vue
-->
<template>
  <div class="player-container">
    <div class="table-content">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="ranking " width="100" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="Player name"
          width="500"
          prop="playerName"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.playerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Game result in past 20 games" align="center">
          <template slot-scope="scope">
            <div style="width: 300px; height: 300px; position: relative">
              <d3-pie :pieData="scope.row.pieData" :pieId="scope.row.id" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getProPlayers } from "@/api/players";
import D3Pie from "./components/D3Pie";
// import resData from "./response";
export default {
  components: {
    D3Pie,
  },
  data() {
    return {
      list: null,
      listLoading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getProPlayers().then((response) => {
        console.log(response);
        const top10List = response.slice(0, 10).map((item) => {
          const winRate = this.random(60, 100)
          return {
            ...item,
            pieData: [
              ["Win", winRate],
              ["defeated", 100 - winRate],
            ],
            playerName: item.name,
            id: item.account_id,
          };
        });
        this.list = top10List;
        this.listLoading = false;
      });
    },
    random(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
  },
};
</script>
<style lang="scss" scoped>
.player-container {
  .table-content {
  }
}
</style>